*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
}

html {
  @apply bg-black text-generic-500;
  font-family: theme('fontFamily.sans');
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

body,
html {
  @apply overflow-hidden;
}

body,
html,
#__nuxt,
#__layout {
  @apply h-full;
}

dialog {
  @apply m-auto p-0 bg-transparent text-white;
  width: 32em;
  max-width: 100%;

  .dialog__content {
    @apply p-4 bg-dark-500 rounded;
    @apply flex flex-col justify-center;
  }
}

dialog::backdrop {
  background: rgba(25, 25, 26, 0.75);
}

.swal-content {
  font-size: 16px;

  p {
    @apply mb-2;
  }

  a {
    @apply text-primary-500 underline;
  }
}

*::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	@apply bg-dark-800;
}

*::-webkit-scrollbar
{
	width: 10px;
	@apply bg-dark-800;
}

*::-webkit-scrollbar-thumb
{
  @apply bg-dark-100 rounded-sm;
  transition: all .1s ease-in-out;

  &:hover {
    @apply bg-primary-700;
  }
}

.swal2-html-container {
  pre {
    @apply text-xs overflow-auto bg-gray-300 p-2;
  }
}

.swal2-footer {
  code {
    @apply text-sm text-center;
  }
}